<template>
  <div class="entry">
    <!-- {{ getUserInfo }} -->
    <div v-if="resultObj.isOpenFlag" class="entry-swipe">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item>
          <img src="/img/banner3.jpg" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div v-if="resultObj.isOpenFlag" class="entry-list">
      <ul>
        <li @click="toPage('/empDimission/qa')">
          <img src="@/assets/QA@2x.png" alt="" />
          <span>{{ $t('text.qa') }}</span>
        </li>
        <li @click="toPage(applyIngFlag ? '/empDimission/certificateList' : '/empDimission/certificate')">
          <img src="@/assets/lizhizhengming@2x.png" alt="" />
          <span>{{ $t('text.dimiCertAppl') }}</span>
        </li>
        <!-- <li
					v-if="resultObj.nonComCount > 0"
					@click="toPage(!waitUploadCount ? '/empDimission/competitionList' : '/empDimission/competition')"
				>
					<img src="@/assets/cailiaoshangchuan@2x.png" alt="" />
					<span>{{ $t('text.compUpload') }}</span>
				</li> -->
        <li v-if="resultObj.nonComCount > 0" @click="toPage('/empDimission/competitionList')">
          <img src="@/assets/cailiaoshangchuan@2x.png" alt="" />
          <span>{{ $t('text.compUpload') }}</span>
        </li>
        <li @click="toPage('/workExperience/index')">
          <img src="@/assets/jinglichaxun@2x.png" alt="" />
          <span>{{ $t('text.empExperience') }}</span>
        </li>
      </ul>
    </div>

    <van-dialog
      v-model:show="dialogObj.sfShow"
      width="320px"
      :confirmButtonText="$t('button.confirm')"
      confirmButtonColor="#824c96"
      :cancelButtonText="$t('button.close')"
      show-cancel-button
      :beforeClose="beforeClose"
    >
      <template #title>
        <div class="confirm-title">
          <h6>{{ $t('text.confirmSf') }}</h6>
        </div>
      </template>
      <template #default>
        <div class="confirm-sf">
          <div class="confirm-sf-inner">
            <van-form @submit="onSubmit">
              <van-cell-group :border="false">
                <h6 class="title">
                  <span>{{ $t('text.idCardNo') }}:</span>
                </h6>
                <van-field v-model="paramsObj.idNum" maxlength="20" :placeholder="$t('text.pleaseEnterIdCardNo')">
                  <template #title>
                    <span class="cell-title"></span>
                  </template>
                </van-field>
                <!-- <van-cell :border="false" style="margin-top: -6px;">
									<van-checkbox v-model="paramsObj.checked" :label-disabled="true" checked-color="#824c96" icon-size="16px">
										<span class="checked-info">
											<span>{{ $t('text.checkedInfoSt1') }}</span>
											<a href="javascript:void(0);" @click="openDialog('smShow')">{{ $t('text.checkedInfoSt2') }}</a>
										</span>
									</van-checkbox>
								</van-cell> -->
              </van-cell-group>
            </van-form>
          </div>
        </div>
      </template>
    </van-dialog>

    <van-dialog
      v-model:show="dialogObj.smShow"
      width="320px"
      :confirmButtonText="$t('button.agree')"
      confirmButtonColor="#824c96"
      :cancelButtonText="$t('button.close')"
      show-cancel-button
      @confirm="checkedInfoConfirm"
    >
      <template #default>
        <div class="confirm-sm">
          <div class="confirm-sm-inner">
            <div v-html="$t('text.agreementInfo')"></div>
          </div>
        </div>
      </template>
    </van-dialog>

    <van-overlay :show="errorFlag" lock-scroll>
      <div class="error-box">
        <Error />
      </div>
    </van-overlay>
  </div>
</template>

<script lang="ts" setup name="entry">
  import { useUserStore } from '@/store/modules/user';
  import { setLang } from '@/i18n';
  import { useI18n } from 'vue-i18n';
  // import { Github, Check } from '@nutui/icons-vue';
  import { getPermissions, checkApplyIng, checkWaitUpload, checkPermByIdCard } from '@/api/empDimission';
  import { showToast } from 'vant';
  import Error from '@/views/error/index.vue';

  const { locale, messages } = useI18n();

  const route = useRoute();
  const router = useRouter();

  const authorization = ref();
  const loading = ref(false);
  const finished = ref(false);
  const applyIngFlag = ref(false);
  const errorFlag = ref(false);
  const waitUploadCount = ref(0);
  const paramsObj = reactive({
    phone: '',
    idNum: '',
    checked: false,
  });
  const resultObj = reactive({
    isOpenFlag: false,
    nonComCount: 0,
    psncode: '',
    psnname: '',
  });
  const dialogObj = reactive({
    sfShow: false,
    smShow: false,
  });

  const userStore = useUserStore();

  const getUserInfo = computed(() => {
    let userInfo = userStore.getUserInfo || {};
    return userInfo;
  });

  const changeLang = (type) => {
    setLang(type);
  };

  const toPage = (path) => {
    router.push({
      path: path,
      query: {
        t: new Date().getTime(),
      },
    });
  };

  const setErrorFlag = (flag) => {
    errorFlag.value = flag;
    sessionStorage.setItem('errorFlag', flag);
  };

  const getCheckApplyIng = async () => {
    let userInfo = userStore.getUserInfo || {};
    let params = {
      psncode: userInfo.psncode,
      psnname: userInfo.psnname,
    };
    loading.value = true;
    let res = await checkApplyIng(toRaw(params));
    if (res.code == 200) {
      applyIngFlag.value = !!res.data.applyIngFlag;
      loading.value = false;
    } else {
      loading.value = false;
    }
  };

  const getCheckWaitUpload = async () => {
    let userInfo = userStore.getUserInfo || {};
    let params = {
      psncode: userInfo.psncode,
      psnname: userInfo.psnname,
    };
    loading.value = true;
    let res = await checkWaitUpload(toRaw(params));
    if (res.code == 200) {
      waitUploadCount.value = res.data.waitUploadCount;
      loading.value = false;
    } else {
      loading.value = false;
    }
  };

  const openDialog = (type: string) => {
    dialogObj[type] = true;
  };

  const closeDialog = (type: string) => {
    dialogObj[type] = false;
  };

  const beforeClose = (action) => {
    new Promise((resolve) => {
      resolve(false);
      if (action === 'confirm') {
        onSubmit((status: boolean) => {
          if (status) {
            closeDialog('sfShow');
          }
        });
      } else {
        window.history.back();
      }
    });
  };

  const checkedInfoConfirm = () => {
    paramsObj.checked = true;
  };

  const onSubmit = async (cb) => {
    if (!paramsObj.idNum) {
      showToast(messages.value[locale.value].error['inputIdNumTip'] || '-');
      cb(false);
      return false;
    }

    // if (!paramsObj.checked) {
    // 	showToast(messages.value[locale.value].error['checkedInfoTip'] || '-');
    // 	cb(false);
    // 	return false;
    // }

    let params = {
      idCard: paramsObj.idNum,
    };
    loading.value = true;
    let res = await checkPermByIdCard(toRaw(params));
    if (res.code == 200) {
      loading.value = false;
      if (res.data && res.data.isOpenFlag) {
        let userInfo = res.data || {};
        userStore.setUserInfo(userInfo);
        sessionStorage.setItem('userInfo', JSON.stringify(userInfo));
        if (userInfo.hasOwnProperty('isOpenFlag') && !userInfo.isOpenFlag) {
          // toPage('/error');
          setErrorFlag('show');
          return false;
        }
        setResultObj(userInfo);
        getCheckApplyIng();
        // getCheckWaitUpload();
        cb(true);
      } else {
        showToast(messages.value[locale.value].error['inputIdNumTipErr'] || '-');
        cb(false);
      }
    } else {
      showToast(messages.value[locale.value].asyncError[res.code] || '-');
      loading.value = false;
    }
  };

  const setResultObj = (userInfo: object) => {
    userStore.setUserInfo(userInfo);
    sessionStorage.setItem('userInfo', JSON.stringify(userInfo));
    for (let i in userInfo) {
      resultObj[i] = userInfo[i];
    }
  };

  const initData = () => {
    let userInfo = userStore.getUserInfo || {};
    let userInfoList = userStore.getUserInfoList || [];
    if (userInfo.hasOwnProperty('isOpenFlag') && !userInfo.isOpenFlag) {
      // toPage('/error');
      setErrorFlag('show');
      return false;
    }
    if (userInfo.hasOwnProperty('psncode') && userInfo.hasOwnProperty('psnname') && userInfo.psncode && userInfo.psnname) {
      for (let i = 0; i < userInfoList.length; i++) {
        if (userInfo.psncode == userInfoList[i].psncode) {
          userInfo.nonComCount = userInfoList[i].nonComCount;
        }
      }
      setResultObj(userInfo);
      getCheckApplyIng();
      // getCheckWaitUpload();
    } else {
      if (userInfoList.length > 1) {
        openDialog('sfShow');
      }
    }
  };

  onMounted(() => {
    // let auth = (route.query.authorization || sessionStorage.getItem('authorization')) as string;
    // authorization.value = auth;
    // let phone = (route.query.phone || sessionStorage.getItem('phone')) as string;
    // paramsObj.phone = phone;
    // onLoad();

    // 数据初始化
    initData();
  });
</script>
<style lang="scss" scoped>
  .entry {
    padding: 15px;

    .entry-swipe {
      background-color: #d8d8d8;
      border-radius: 8px;
      overflow: hidden;

      .van-swipe {
        img {
          width: 100%;
          display: block;
        }

        ::v-deep(.van-swipe__indicators) {
          .van-swipe__indicator {
            &.van-swipe__indicator--active {
              background-color: #824c96;
            }
          }
        }
      }
    }

    .entry-list {
      background-color: #ffffff;
      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      margin-top: 10px;

      ul {
        margin: 0;
        padding: 0;

        li {
          margin: 0;
          padding: 18px 15px;
          list-style: none;
          position: relative;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          background-image: url('@/assets/arrow@2x.png');
          background-position: calc(100% - 10px) 18px;
          background-repeat: no-repeat;
          background-size: 16px 18px;

          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;
            height: 1px;
            background-color: rgba(226, 230, 232, 0.5);
          }

          &:last-child {
            &::after {
              display: none;
            }
          }

          img {
            height: 20px;
            width: 20px;
            min-width: 20px;
          }

          span {
            height: 20px;
            font-size: 14px;
            color: #151719;
            line-height: 20px;
            font-style: normal;
            margin-left: 10px;
          }
        }
      }
    }

    .entry-lang {
      text-align: center;
      margin-top: 24px;

      span {
        display: inline-block;
        padding: 0 20px;
        font-size: 14px;
        color: #824c96;
        line-height: 28px;
        font-style: normal;
        transform: scale(0.92);
      }
    }
  }

  .confirm-title {
    margin-top: -12px;

    h6 {
      font-size: 16px;
      color: #824c96;
    }
  }

  .confirm-sf {
    padding: 10px 10px 14px 10px;

    .confirm-sf-inner {
      .van-form {
        .title {
          font-size: 14px;
          color: #151719;
          line-height: 22px;
          text-align: left;
          font-style: normal;
          font-weight: bold;
          padding: 10px 15px 0 15px;

          strong {
            color: #dc4646;
            margin-right: 4px;
          }
        }

        .van-cell {
          padding-left: 12px;
          padding-right: 10px;

          .cell-title {
            font-size: 14px;
            color: #cccfd5;
            line-height: 24px;
            font-style: normal;

            &.black {
              color: #323233;
            }
          }

          &.van-field {
            &::before {
              display: none;
            }
            &::after {
              display: none;
            }
          }
        }

        .van-field {
          padding-left: 10px;
          padding-right: 10px;

          ::v-deep(.van-cell__value) {
            padding-left: 8px;
            padding-right: 8px;
            border-radius: 8px;
            border: 1px solid #e2e6e8;

            .van-field__control {
              height: 30px;
              line-height: 30px;
            }
          }
        }

        .checked-info {
          font-size: 12px;
          color: #323232;

          a {
            color: #824c96;
          }
        }
      }
    }
  }

  .confirm-sm {
    padding: 10px;

    .confirm-sm-inner {
      min-height: 240px;
      max-height: 400px;
      overflow-y: scroll;

      ::v-deep(p) {
        font-size: 14px;
        color: #323233;
        line-height: 1.74;
      }
    }
  }

  .error-box {
    height: 100vh;
    width: 100vw;
    background-color: #fff;
    overflow: hidden;
  }
</style>
